<template>
	<!-- <view>
		这里是分类页面
	</view> -->
	<view class="box">
		<view class="bind" @click="gosection(item.id)" :class="{style:index==1}" v-if="index==0||index==1" v-for="(item,index) in Category" :key="item.id">		
				<view class="bind-l ">{{item.name}}</view>
				<view class="bind-r">
					<image :src="item.icon"></image>
				</view>
		</view>
		<view class="bind-b">
			<view class="ornaments" @click="gosection(item.id)" v-if="index==2||index==3" v-for="(item,index) in Category" :key="item.id">
				<image :src="item.icon" ></image>
				<view class="ornaments-name">{{item.name}}</view>
			</view>
		</view> 
	</view>
</template>

<script>
	import {findAllCategory,findCategory} from "../../api/kind/index.js"
	export default {
		data() {
			return {
				id:"1308336521604599809",
				// AllCategory:[]
				Category:[]
			};
		},
		methods:{
			//点击返回section页面
			gosection(key){
				uni.navigateTo({
					url:`../home/section/section?id=${key}`,
					
				})
				}
		},
		onLoad(){
			// //分类详细列表
			// findAllCategory().then(res=>{
			// 	console.log(res)
			// 	this.AllCategory=res.data.items[0].children
			// 	console.log(this.AllCategory[0])
			// })
			//根据id查询分类id
			findCategory(this.id).then(res=>{
				console.log(res)
				this.Category=res.data.category.children
			})
		},
		
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	height: 100vh;
	background-color:#F1ECE7 ;
	.bind {
		width: 335px;
		height: 151px;
		background: #d5d5d5;
		box-shadow: 0 12px 20px 0 rgba(83,66,49,.05);
		border-radius: 20px;
		margin: 28px auto;
		display: flex;
		justify-content: space-between;
		.bind-l{
			width: 40%;
			height: 100%;
			margin-left: 26px;
			margin-top: 74px;
			font-size: 24px;
		}
		.bind-r{
			width: 60%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.bind.style{
		background-color: #fff;
	}
	.bind-b{
		width: 335px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		.ornaments{
			width:45%;
			height: 221px;
			position:relative;
			image{
				width: 100%;
				height: 100%;
			}
			.ornaments-name{
				position: absolute;
				left: 26px;
				top: 74px;
				font-size: 24px;
			}
		}
	}
}
</style>
